<template>
	<div class="show-notice">
		<div class="notice-list" :style="{transform: 'translateY(-'+noticePosition+'px) translateZ(0px)'}">
				<ul v-if='type===1'>
					<li v-for="notice in notices" class="wbox" track-by="$index">
						<!-- <span>{{notice.name}}</span> -->
						<span class="wfl">{{notice}}</span>
						<span>报名成功</span>
					</li>
				</ul>
				<ul v-if='type==2' :class="{index:type==2}">
					<li v-for="notice in notices" class="wbox" track-by="$index">
						<a :href="notice.description">{{notice.label}}</a>
					</li>
				</ul>
		</div>
		
	</div>
</template>

<script>
import rAF from "../../assets/js/ref.js";
export default {
  name: "RollNotice",
  props: {
    notices: {
      required: true,
      coerce(data) {
        data.push(data[0]);
        return data;
      }
    },
    type: {
      default: 1
    }
  },
  data() {
    return {
      noticePosition: 0 // 列表位置
    };
  },
  mounted() {
    let destination = 30;
    this.time = setInterval(() => {
      if (destination / 30 < this.notices.length) {
        this.move(destination, 500);
        destination += 30;
      } else {
        // 列表到底
        this.noticePosition = 0; // 设置列表为开始位置
        destination = 0;
        this.move(destination, 500);
        destination += 30;
      }
    }, 2000);
  },
  beforeDestroy() {
    clearInterval(this.time);
  },
  methods: {
    move(destination, duration) {
      // 实现滚动动画
      let speed = (destination - this.noticePosition) * 1000 / (duration * 60);
      let count = 0;
      let step = () => {
        this.noticePosition += speed;
        count++;
        rAF(() => {
          if (this.noticePosition < destination) {
            step();
          } else {
            this.noticePosition = destination;
          }
        });
      };
      step();
    }
  }
};
</script>

<style>
.show-notice {
  overflow: hidden;
  /* vertical-align: middle; */
  width: 66.6%;
  margin-top: 5px;
}
.show-notice ul {
  height: 30px;
}
.notice-list ul li {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}

.notice-list ul.index li a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.notice-list ul li span {
  display: block;
  /* width: 33.3%; */
  color: #777;
}
.notice-list ul li span:nth-child(1) {
  /* display: block; */
  text-align: center;
}
.notice-list ul li span:nth-child(2) {
  /* display: block; */
  text-align: right;
}
.notice-list ul li span:nth-child(3) {
  padding-right: 10px;
}
</style>